<template>
  <div class="vip_container">
    <div class="vip_container__topTitle">会员列表</div>
    <div class="vip_container__midIpt">
      <div class="vip_container__midIpt__top">
        <el-form
          :model="vipForm"
          label-width="120px"
          class="vip_container__midIpt__top__input"
        >
          <el-form-item label="会员名称">
            <el-input v-model="vipForm.name" placeholder="会员名称" />
          </el-form-item>
          <el-form-item label="会员手机号">
            <el-input v-model="vipForm.phone" placeholder="会员手机号" />
          </el-form-item>
        </el-form>
        <div class="vip_container__midIpt__top__input__date">
          注册时间 :
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
      </div>
      <div class="vip_container__midIpt__bottom">
        <el-button type="primary">筛选</el-button>
        <el-button type="primary">导出</el-button>
      </div>
    </div>
    <div class="vip_container__bottomList">
      <el-table :data="tableData" style="width: 100%" height="400">
        <el-table-column
          v-for="item of tableColumn"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        />
        <el-table-column
          prop="address"
          label="headImg"
          width="120"
          align="center"
        >
          <img src="../../assets/vue.svg" alt="" />
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template #default>
            <el-button type="warning" size="small">禁用</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="vip_container__bottomList__pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="tableData.length + 1"
          class="mt-4"
          :hide-on-single-page="true"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";

const vipForm = reactive({
  name: "",
  phone: "",
});
const value1 = ref("");
const tableColumn = reactive([
  {
    prop: "id",
    label: "会员ID",
    width: 150,
    fixed: true,
  },
  {
    prop: "name",
    label: "会员名称",
    width: 150,
  },
  {
    prop: "phone",
    label: "会员手机号",
    width: 150,
  },
  {
    prop: "address",
    label: "会员地址信息",
    width: 300,
  },
  {
    prop: "count",
    label: "会员账户信息",
    width: 220,
  },
  {
    prop: "orders",
    label: "会员订单情况",
    width: 170,
  },
]);
const tableData = [
  {
    id: 1001,
    date: "2016-05-03",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Home",
  },
  {
    id: 1001,
    date: "2016-05-02",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Office",
  },
  {
    id: 1001,
    date: "2016-05-04",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Home",
  },
  {
    id: 1001,
    date: "2016-05-01",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Office",
  },
  {
    id: 1001,
    date: "2016-05-03",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Home",
  },
  {
    id: 1001,
    date: "2016-05-02",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Office",
  },
  {
    id: 1001,
    date: "2016-05-04",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Home",
  },
  {
    id: 1001,
    date: "2016-05-01",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Office",
  },
  {
    id: 1001,
    date: "2016-05-03",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Home",
  },
  {
    id: 1001,
    date: "2016-05-02",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Office",
  },
  {
    id: 1001,
    date: "2016-05-04",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Home",
  },
  {
    id: 1001,
    date: "2016-05-01",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Office",
  },
  {
    id: 1001,
    date: "2016-05-03",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Home",
  },
  {
    id: 1001,
    date: "2016-05-02",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Office",
  },
  {
    id: 1001,
    date: "2016-05-04",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Home",
  },
  {
    id: 1001,
    date: "2016-05-01",
    name: "Tom",
    phone: 13712341234,
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    count: "CA 90036",
    orders: "Office",
  },
];
</script>
<style lang="scss" scoped>
.vip_container {
  background-color: #fff;
  width: 95%;
  height: 800px;
  min-width: 1500px;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 20px;
  &__midIpt {
    background-color: #f5f5f5;
    padding: 10px;
    box-sizing: border-box;
    &__top {
      display: flex;
      justify-content: space-between;
      padding-right: 40px;
      &__input {
        display: flex;
      }
    }
    &__bottom {
      padding-left: 50px;
    }
  }
  &__bottomList {
    &__pagination {
      display: flex;
      justify-content: end;
      padding: 20px;
    }
  }
}
</style>
